<template>
  <div class="right-out">
    <div class="nav">我的钱包</div>
    <div class="content">
      <div class="balance">
        钱包余额
        <el-icon>
          <InfoFilled />
        </el-icon>
      </div>
      <div class="moneny">￥<span>99999元</span></div>
      <div class="withdraw">
        <el-button type="primary" disabled>提现</el-button>
      </div>
      <div class="service">
        <span>联系客服</span>
      </div>
    </div>
    <div class="check">
      <p>
        钱包明细
        <span>
          <el-icon>
            <InfoFilled />
          </el-icon>
        </span>
      </p>
      <div>暂无数据</div>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
  name: "wallet",
});
</script>

<script setup lang="ts">
import { InfoFilled } from "@element-plus/icons-vue";
</script>
<style scoped lang="scss">
.right-out {
  .nav {
    width: 1020px;
    background-color: white;
    border-radius: 3px;
    padding: 28px 30px;
    font-size: 14px;
    box-sizing: border-box;
    margin-bottom: 10px;
    color: #111;
    text-align: left;
  }
  .content {
    width: 1020px;
    background-color: white;
    border-radius: 3px;
    padding: 30px;
    overflow: hidden;
    box-sizing: border-box;
    margin-bottom: 10px;
    .balance {
      font-size: 16px;
      margin: 32px 0;
      text-align: center;
    }
    .moneny {
      font-size: 26px;
      font-weight: 700;
      padding: 60px 0 51px;
      text-align: center;
      span {
        color: #fc9bc2;
      }
    }
    .withdraw {
      text-align: center;
      .el-button {
        background-color: #fc9bc2;
        border: none;
        width: 180px;
        height: 50px;
      }
    }
    .service {
      padding: 111px 0 16px;
      text-align: center;
      font-size: 14px;
      color: #7d8090;
    }
  }
  .check {
    width: 1020px;
    background-color: white;
    padding: 30px;
    box-sizing: border-box;
    border-radius: 3px;
    p {
      font-size: 14px;
      margin: 10px 0;
      border-bottom: 1px solid #e3e3e3;
      padding-bottom: 23px;
      text-align: left;
      span {
        padding-left: 10px;
        text-align: center;
      }
    }
    .checkData {
      padding: 20px 0;
      color: #909399;
      text-align: center;
      font-size: 14px;
    }
  }
}
</style>
